<template>
  <md-page title="二维码打卡" isRefresh @pullDownRefresh="handlePullDownRefresh">
    <view class="container">
      <view class="card">
        <view class="title">{{ data.info?.point_name }}</view>
        <view v-if="data.info?.point_type?.length > 0" class="tags m-bottom-30 m-top-12">
          <view v-for="item in data.info?.point_type" :key="item" :class="['tag', data.tagMap[item]]">
            {{ data.pointType[item] }}
          </view>
        </view>
        <!-- 打卡处理 1：未打卡 2：已打卡成功 -->
        <block v-if="data.info?.is_check == 1">
          <!-- 打卡二维码 -->
          <view class="code-wrap" v-if="data.isPoint && data.info?.dk_type == 3">
            <view class="left-title">打卡二维码</view>
            <view class="code-content flex-c">
              <ikun-qrcode width="390" height="390" unit="rpx" color="#000000" :data="url" />
            </view>
          </view>
          <!-- 用户扫码打卡 -->
          <view class="buji-wrap" @click="handleScan" v-if="data.isPoint && data.info?.dk_type == 1">
            <view class="left-title" :style="{ background: data.configInfo?.select_color_text }">扫码</view>
            <view class="content">点击扫码打卡</view>
            <view class="code">
              <md-icon name="scan" width="77" height="77"></md-icon>
            </view>
          </view>
        </block>
        <view class="buji-wrap m-bottom-30" v-else>
          <view class="left-title" :style="{ background: data.configInfo?.select_color_text }">打卡状态</view>
          <view class="content">已打卡</view>
          <!-- <view class="code" @click="handleScan">
            <md-icon name="scan" width="77" height="77"></md-icon>
          </view> -->
        </view>
        <!-- 补给处理 1：未核销 2：已核销 -->
        <block v-if="data.info?.is_check_bg == 1">
          <!-- 补给二维码 显示大的 -->
          <view class="code-wrap" v-if="!data.isPoint && data.info?.point_type?.includes('3')">
            <view class="left-title" :style="{ background: data.configInfo?.select_color_text }">补给券</view>
            <view class="code-content flex-c">
              <ikun-qrcode width="390" height="390" unit="rpx" color="#000000" :data="bujiUrl" />
            </view>
          </view>
          <!-- 补给二维码 -->
          <view
            class="buji-wrap m-top-30"
            @click="handleOpen"
            v-if="data.isPoint && data.info?.point_type?.includes('3')">
            <view class="left-title">补给券</view>
            <view class="content">点击扫描补给券二维码</view>
            <view class="code">
              <md-icon name="code" width="77" height="77"></md-icon>
            </view>
          </view>
        </block>
        <view class="buji-wrap" v-else>
          <view class="left-title">补给券</view>
          <view class="content">已核销</view>
        </view>
      </view>
      <uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.9)">
        <view class="pop_content flex-c">
          <ikun-qrcode width="390" height="390" unit="rpx" color="#000000" :data="bujiUrl" />
        </view>
      </uni-popup>
    </view>
  </md-page>
</template>

<script lang="ts" setup>
import { matchScanCodeCheck, matchUserScanCodeCheck } from '@/api';
import { PointType } from '@/common/enum';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
const data = reactive<any>({
  configInfo: {},
  point_id: '',
  pointType: PointType,
  tagMap: {
    '1': 'daka',
    '2': 'zhuti',
    '3': 'buji',
    '4': 'daka',
    '5': 'zhuti',
    '6': 'buji',
    '7': 'daka',
  },
  info: {},
  isPoint: false,
});
const url = ref<string>('');
const bujiUrl = ref<string>('');
const popup = ref(null);

const handleOpen = () => {
  popup.value?.open?.();
};

const handleScan = () => {
  // 允许从相机和相册扫码
  uni.scanCode({
    success: function (res) {
      console.log('条码类型：' + res.scanType);
      console.log('条码内容：' + res.result);
      fetchMatchUserScanCodeCheck(res.result);
    },
  });
};

/**
 * 接口相关
 */
const fetchMatchScanCodeCheck = async (point_id?: string) => {
  try {
    const res = await matchScanCodeCheck({
      point_id: point_id || data.point_id,
    });
    data.info = res.data;
    // 打卡点 1 5 6
    const _isPoint =
      res.data?.point_type?.includes('1') || res.data?.point_type?.includes('5') || res.data?.point_type?.includes('6');
    data.isPoint = _isPoint;

    if (res.data?.is_check == 1 && _isPoint) {
      url.value = `/pages/other/scanCode/index?signid=${res.data?.sign_id}&pointid=${res.data?.point_id}&type=1&end=`;
    }
    // 补给点 3
    if (res.data?.is_check_bg == 1 && res.data?.point_type?.includes('3')) {
      bujiUrl.value = `/pages/other/scanCode/index?signid=${res.data?.sign_id}&pointid=${res.data?.point_id}&type=2&end=`;
    }
  } catch (error) {}
};

// 用户扫码打卡
const fetchMatchUserScanCodeCheck = async (scan_info: string) => {
  try {
    const res = await matchUserScanCodeCheck({
      point_id: data.point_id,
      scan_info,
    });
    uni.showModal({
      title: '提示',
      content: res?.msg || '打卡成功',
      showCancel: false,
      success: res => {
        if (res.confirm) {
          fetchMatchScanCodeCheck();
        }
      },
    });
  } catch (error) {}
};

onLoad(option => {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
  }
  data.point_id = option?.point_id;
  option?.point_id && fetchMatchScanCodeCheck(option?.point_id);
});

const handlePullDownRefresh = () => {
  data?.point_id && fetchMatchScanCodeCheck(data.point_id);
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  & > .card {
    padding: 26rpx 30rpx;
    box-sizing: border-box;
    background: white;
    & > .title {
      font-weight: bold;
      font-size: 40rpx;
    }
    & > .tags {
      display: flex;
      align-items: center;
      gap: 20rpx;
      .tag {
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        border-radius: 10rpx;
        padding: 0 18rpx;
        box-sizing: border-box;
        opacity: 0.9;
        color: white;
        &.zhuti {
          background: $primary;
        }
        &.daka {
          background: #eca342;
        }
        &.buji {
          background: #e64627;
        }
      }
    }
  }
  .code-wrap {
    display: flex;
    width: 100%;
    height: 460rpx;
    border-radius: 20rpx;
    overflow: hidden;
    & > .left-title {
      font-size: 34rpx;
      font-weight: bold;
      width: 80rpx;
      background: $primary;
      color: white;
      text-align: center;
      padding: 14rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }
    & > .code-content {
      flex: 1;
      background: #f7f7f7;
      .code-image {
        width: 390rpx;
        height: 390rpx;
        background: white;
      }
    }
  }
  .buji-wrap {
    width: 100%;
    background: #f7f7f7;
    border-radius: 20rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    & > .left-title {
      font-size: 34rpx;
      font-weight: bold;
      width: 80rpx;
      background: #1cc0b2;
      color: white;
      text-align: center;
      padding: 14rpx;
      box-sizing: border-box;
      height: 100%;
    }
    & > .content {
      flex: 1;
      font-size: 34rpx;
      font-weight: bold;
      text-align: center;
    }
    & > .code {
      margin: 0 30rpx;
    }
  }
}

.pop_content {
  background: white;
  width: 410rpx;
  height: 410rpx;
  padding: 10rpx;
}
</style>
